<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>Map</title>
	<link rel="Icon" href="images/fav_icon.png" type="image/gif" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Mobile meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Form styleshets -->
    <link rel="stylesheet" type="text/css" href="css/smart-forms.css">
    <link rel="stylesheet" type="text/css" href="css/smart-themes/green.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="css/smart-addons.css">
	<link rel="stylesheet" type="text/css" href="css/font_awesome/css_awesome/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/font_awesome/css_awesome/font-awesome.css">
	
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
	<script type="text/javascript" src="js/jquery.md5.js"></script>
	
	<script type="text/javascript" src="plugins/bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap-theme.css">
	<link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap.css">
	
    <!-- Placeholder support in IE9 and below -->
    <!--[if lte IE 9]>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
    <![endif]-->
    <!-- IE8 Fallback styling -->
    <!--[if lte IE 8]>
    <link type="text/css" rel="stylesheet" href="css/smart-forms-ie8.css">
    <![endif]-->
	
	<script type="text/javascript"
		src="https://maps.googleapis.com/maps/api/js?v=3.17&key=AIzaSyBkUHsEvJqfg49wVy2WV6jYbr1LX47_5KQ&singed_in=true">
    </script>
	<script type="text/javascript">
		function initialize() {
			var mapOptions = {
			center: { lat: 21.0061946, lng: 105.8431751},
			zoom: 15
			};
			var map = new google.maps.Map(document.getElementById('map-canvas'),
				mapOptions);
		}
		google.maps.event.addDomListener(window, 'load', initialize);
    </script>

</head>
<%
String context = request.getContextPath();
%>
<body>
<div class="content">
	<div class="row row-map">
		<div class="col-md-9" id="map-canvas"></div>
		<div class="col-md-3">
			<div style="border-bottom: 2px solid #ff0000">
				<!-- if -->
				<!-- chưa đăng nhâp -->
				<div class="smart-forms">
					<form method="post" id="form_login" action="<%=context %>/process/checklogin.jsp">
						<div class="form-body form-body-map">
							<div class="frm-row">
								<em for="login-error" id="login_error" class="state-error">Đăng nhập không thành công. Tên đăng nhập hoặc mật khẩu không chính xác!</em>
							</div>
							<div class="frm-row">
								<em for="signup-error" id="signup_error" class="state-error">Đăng kí không thành công. Vui lòng đăng kí lại!</em>
							</div>
							<div class="frm-row form-login form-signup">
								<div class="section colm colm12">
									<label for="username" class="field prepend-icon">
										<input name="username" id="username" type="username" class="gui-input" placeholder="Tên đăng nhập...">
										<label for="username" class="field-icon">
											<i class="fa fa-user"></i>
										</label>
									</label>
									<em for="username" id="username_error" class="state-error">Tên đăng nhập không được bỏ trống!</em>
								</div>
							</div>
							<div class="frm-row form-login form-signup">
								<div class="section colm colm12">
									<label for="password" class="field prepend-icon">
										<input name="password" id="password" type="password" class="gui-input" placeholder="Mật khẩu..." >
										<label for="password" class="field-icon">
											<i class="fa fa-lock"></i>
										</label>
									</label>
									<em for="password" id="password_error" class="state-error">Mật khẩu không được bỏ trống!</em>
								</div>
							</div>
							<div class="frm-row form-signup">
								<div class="section colm colm12">
									<label for="re-password" class="field prepend-icon">
										<input name="re-password" id="re_password" type="password" class="gui-input" placeholder="Nhập lại mật khẩu..." >
										<label for="re-password" class="field-icon">
											<i class="fa fa-lock"></i>
										</label>
									</label>
									<em for="re-password" id="re_password_error" class="state-error">Mật khẩu xác nhận không chính xác!</em>
								</div>
							</div>

							<div class="frm-row" id="btn_form">
								<div class="section colm">
									<button type="button" class="button btn-green btn-form-signup" id="btn_form_signup">
										Đăng Kí
									</button>
								</div>
								<div class="section colm">
									<button type="button" class="button btn-green btn-form-login" id="btn_form_login">
										Đăng Nhập
									</button>
								</div>
							</div>
							<div class="frm-row" id="btn_signup">
								<div class="section colm colm12">
									<button type="button" class="button btn-green btn-signup" id="signup">
										Đăng Kí
									</button>
								</div>
							</div>
							<div class="frm-row" id="btn_login">
								<div class="section colm colm12">
									<button type="button" class="button btn-green btn-login" id="login">
										Đăng Nhập
									</button>
								</div>
							</div>
						</div>
					</form>
				</div>
				<!-- else -->
		
				<!-- đã đăng nhập -->
				<div class="login-name">
					<span>Xin chào, </span>
					<span><!-- Tên Người Dùng -->Nguyễn Mạnh Vũ</span>
					<span><a href="#">Thoát</a></span>
				</div>
				<!-- endif -->
			</div>
			
			<div style="border-bottom: 2px solid #ff0000">
				<div class="smart-forms">
					<form method="post" id="form_search">
						<div class="form-body form-body-map">
							<div class="frm-row">
								<div class="section colm colm12">
									<label for="search" class="field prepend-icon">
										<input name="search" id="search" type="text" class="gui-input" placeholder="Tìm đường..." >
										<label for="search" class="field-icon">
											<i class="fa fa-search"></i>
										</label>
									</label>
									<em for="search" id="search_error" class="state-error">Vui lòng nhập tên đường</em>
								</div>
							</div>
							<div class="frm-row">
								<div class="section colm colm6">
									<button type="button" class="button btn-green" id="btn_search">
										Tìm Kiếm
									</button>
								</div>
								<div class="section colm colm6">
									<button type="button" class="button btn-green" id="btn_direct">
										Chỉ Đường
									</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</body>

<script type="text/javascript">
$(document).ready(function(){

	$('#btn_form_login').click(function(){
		$('.form-login').show('slow');
		$('#btn_form').hide();
		$('#btn_login').show();
	});
	
	$('#btn_form_signup').click(function(){
		$('.form-signup').show('slow');
		$('#btn_form').hide();
		$('#btn_signup').show();
	});
	
	$(document).click(function(event){
		var ele = $(event.target);
		if(!ele.is($('#form_login').find('*'))){
			$('.form-signup').hide();
			$('#btn_login').hide();
			$('#btn_signup').hide();
			$('#btn_form').show();
			$('#username_error, #password_error, #re_password_error, #login_error, #signup_error').hide();
			
		}
	});
	
	//đăng nhập ở đây
	$('#login').click(function(){
		var username = $('#username').val();
		var password = $('#password').val();
		if(username == "" || password == ""){
			if(username == ""){
				$('#username_error').show();
			}
			if(password == ""){
				$('#password_error').show();
			}
		} else {
			var objLogin = ({
				user : username,
				pass : password
			});
			var jsonobj = JSON.stringify(objLogin);
			var linksss = "http://"+ location.host + "/traficforecast/process/checklogin.jsp";
			$.ajax({
				data : {
					para : jsonobj
				},
				dataType : 'json',
				url : linksss,
				type : 'POST',
				success : function(result) {
					if(result.res){
						alert('Dang nhap thanh cong');
					}else{
						$("#login_error").show();
					}
				},
				error : function() {
					alert('Ajax readyState: ' + xhr.readyState + '\nstatus: '
							+ xhr.status + ' ' + err);
				}
			});
		}
	});
	
	//đăng kí ở đây
	$('#signup').click(function(){
		var username = $('#username').val();
		var password = $('#password').val();
		var re_password = $('#re_password').val();
		if(username == "" || password == "" || re_password == "" || password != re_password){
			if(username == ""){
				$('#username_error').show();
			}
			if(password == ""){
				$('#password_error').show();
			}
			if(re_password == "" || password != re_password){
				$('#re_password_error').show();
			}
		} else {
			var objSignup = {
				user: username,
				pass: password
			};
			var jsonobj = JSON.stringify(objSignup);
			var linksss = "http://"+ location.host + "/traficforecast/process/signup.jsp";
			$.ajax({
				data : {
					para : jsonobj
				},
				dataType : 'json',
				url : linksss,
				type : 'POST',
				success : function(result) {
					if(result.res){
						alert('Dang ki thanh cong');
					}else{
						$("#signup_error").show();
					}
				},
				error : function() {
					alert('Ajax readyState: ' + xhr.readyState + '\nstatus: '
							+ xhr.status + ' ' + err);
				}
			});
		}
	});
});
</script>

</html>